<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title></title>
    <link href="static/css/style.css" rel="stylesheet" type="text/css" />
    <style>
    	/*遮罩层*/
        .hidea{
            width: 100%;
            height: 100%;
            background:rgba(0,0,0,0.5);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 88;
            display: none;
        }
        #model{
        	position:fixed;
        	border:1px #ccc solid;
        	z-index: 99;
        	left:480px;
        	top:100px;
        	background-color:#fff;
        	width:400px;
        	display: none;
        }
    </style>
	<script type="text/javascript" src="static/js/jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		
		$("#close").click(function(){
			$(".hidea").hide();
			$("#model").hide();
		});
		$(".hidea").click(function(){
			$(".hidea").hide();
			$("#model").hide();
		})
		$(".shan").click(function(){
			$(".tip").fadeIn(200);
		});
		$(".tiptop a").click(function(){
			$(".tip").fadeOut(200);
		});
		$(".sure").click(function(){
			$(".tip").fadeOut(100);
		});
		$(".cancel").click(function(){
			$(".tip").fadeOut(100);
		});

		$("#model ul").hide();
		$("#model ul:eq(0)").show();
		$("#model div").click(function(){
			$("#model ul").stop().slideUp();
			$(this).next().stop().slideDown();
		});
		$("#model div input").click(function(){
			var bool = $(this).attr("checked");
			if(bool==true){
				$(this).parent().next("ul").find("input").attr("checked",true);
			}else{
				$(this).parent().next("ul").find("input").attr("checked",false);
			}
		});
		$("#model ul input").click(function(){
			var y = $(this).parents("ul").find("input:checked").size();
			if(y!=0){
				$(this).parents("ul").prev().find("input").attr("checked",true);
			}else{
				$(this).parents("ul").prev().find("input").attr("checked",false);
			}
		});
		/**
			关闭模态框
		**/
		$("#closea").click(function(){
			$(".hidea").hide();
			$("#model").hide();
		});
	});
	/**
		添加权限模态框
	**/
	function sel(e){
		$.each($("#model").find("input"),function(){
			$(this).attr("checked",false);
		});
		$.post("system/oneMennu",{hMid:e},function(data){
			var i = $("#model").find("input");
			$.each(data,function(){
				var a = this.hMid;
				$.each(i,function(){
					if(a==$(this).val()){
						$(this).attr("checked",true);
					}
				});
			});
		});
		$(".hidea").show();
		$("#model").show();
		/**
			添加权限
		**/
		$("#add").unbind("click").bind("click",function(){
			var b = [];
			$.each($("#model").find(":checkbox:checked"),function(){
				b.push($(this).val());
			});
			$.post("system/addAuthor",{hMid:e,integer:b.join("-")},function(data){
				if(data!=0){
					alert("添加成功");
				}else{
					alert("添加失败");
				}
			})
			$(".hidea").hide();
			$("#model").hide();
		});
	}
	</script>
	
	
	</head>
	
	
	<body>
		<!--遮罩层-->
	    <div class="hidea"></div>
		<div class="place">
		    <span>位置：</span>
		    <ul class="placeul">
			    <li><a href="#">首页</a></li>
			    <li><a href="#">数据表</a></li>
			    <li><a href="#">基本内容</a></li>
		    </ul>
	    </div>
	    <div class="rightinfo">
	    <form action="" method="post">
	    <ul class="seachform" style="overflow: hidden;">
	    	<li><label>编号</label><input name="bId" value="" type="text" class="scinput" style="width:50px;"/></li>
		    <li><label>用户名</label><input name="bName" value="" type="text" class="scinput" /></li>
		    <li><label>&nbsp;</label><input type="submit" class="scbtn" value="查询"/>&nbsp;<span style="color:skyblue;display: inline;">(名称支持模糊查询)</span></li>
	    </ul>
    </form>
	    <table class="tablelist">
	    	<thead>
		    	<tr align="center">
			        <th style="text-align:center;"><input name="" type="checkbox" value="" checked="checked"/></th>
			        <th style="text-align:center;">角色编号</th>
			        <th style="text-align:center;">角色名称</th>
			        <th style="text-align:center;">操作</th>
		        </tr>
	        </thead>
	        <tbody>
		        <c:forEach items="${requestScope.manage}" var="m">
		        	<tr align="center">
				        <td><input name="" type="checkbox" value="" /></td>
				        <td>${m.hMid }</td>
				        <td>${m.hMname }</td>
				        <td><a href="javascript:void(0);" onclick="sel(${m.hMid})"  class="tablelink shou">授权</a>     <a href="javascript:void(0);" class="tablelink shan"> 删除</a></td>
			        </tr>
		        </c:forEach>
	        </tbody>
	    </table>
	    
	   
	    <div class="pagin">
	    	<div class="message">共<i class="blue">1256</i>条记录，当前显示第&nbsp;<i class="blue">2&nbsp;</i>页</div>
	        <ul class="paginList">
	        <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>
	        <li class="paginItem"><a href="javascript:;">1</a></li>
	        <li class="paginItem current"><a href="javascript:;">2</a></li>
	        <li class="paginItem"><a href="javascript:;">3</a></li>
	        <li class="paginItem"><a href="javascript:;">4</a></li>
	        <li class="paginItem"><a href="javascript:;">5</a></li>
	        <li class="paginItem more"><a href="javascript:;">...</a></li>
	        <li class="paginItem"><a href="javascript:;">10</a></li>
	        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>
	        </ul>
	    </div>
		    <div class="tip">
		    	<div class="tiptop"><span>提示信息</span><a></a></div>
		      	<div class="tipinfo">
			        <span><img src="images/ticon.png" /></span>
			        <div class="tipright">
			        <p>是否确认对信息的修改 ？</p>
			        <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
			        </div>
		        </div>
		        
		        <div class="tipbtn">
			        <input name="" type="button"  class="sure" value="确定" />&nbsp;
			        <input name="" type="button"  class="cancel" value="取消" />
		        </div>
		    </div>
	    </div>
	    <div id="model">
	    	<div  class="tiptop" style="margin-bottom:20px;"><span>角色授权</span><a id="close"></a></div>
	    	<c:forEach items="${requestScope.map }" var="map">
    			<div style="margin-left:150px;"><input type="checkbox" value="${map.key.hMid }"/>&nbsp;&nbsp;<strong style="font-size:14px;">${map.key.hMname }</strong></div>
    			<ul style="margin-left:170px;line-height:25px;">
    				<c:forEach items="${map.value }" var = "v">
	    				<li style="font-size:14px;"><input type="checkbox" value="${v.hMid }"/><strong style="font-size:14px;color:#666;">${v.hMname }</strong></li>
	    			</c:forEach>
	    		</ul>
    		</c:forEach>
	    	<div class="tipbtn" style="margin-bottom:20px;">
			       <input name="" type="button"  class="sure" id="add" value="确定" />&nbsp;
			       <input name="" type="button"  class="cancel" id="closea" value="取消" />
		    </div>
	    </div>
	    <script type="text/javascript">
			$('.tablelist tbody tr:odd').addClass('odd');
		</script>
	</body>
</html>